<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参考链接：https://juejin.cn/post/7035812561027072031</title>
</head>

<body>

</body>
<script>

    /**
     * 255颜色值转16进制颜色值
     * @param n 255颜色值
     * @returns hex 16进制颜色值
     */
    const toHex = (n) => `${n > 15 ? '' : 0}${n.toString(16)}`;
    console.log(toHex(1))
    /**
     * 颜色对象转化为16进制颜色字符串
     * @param colorObj 颜色对象
     */
    const toHexString = (colorObj) => {
        const { r, g, b, a = 1 } = colorObj;
        return `#${toHex(r)}${toHex(g)}${toHex(b)}${a === 1 ? '' : toHex(Math.floor(a * 255))}`;
    };
    // color: rgba(255, 194, 204, .6);
    // color: #ffc2cc99;
    console.log('---rgba-16进制', toHexString({ r: 255, g: 194, b: 204, a: 0.6 }))

    /**
     * 颜色对象转化为rgba颜色字符串
     * @param colorObj 颜色对象
     */
    const toRgbString = (colorObj) => {
        const { r, g, b } = colorObj;
        return `rgb(${r},${g},${b})`;
    };
    console.log('777', toRgbString({ r: 255, g: 194, b: 204 }))
    /**
     * 颜色对象转化为rgba颜色字符串
     * @param colorObj 颜色对象
     */
    const toRgbaString = (colorObj, n = 10000) => {
        const { r, g, b, a = 1 } = colorObj;
        return `rgba(${r},${g},${b},${Math.floor(a * n) / n})`;
    };
    console.log('888', toRgbaString({ r: 255, g: 194, b: 204, a: 1 }))

    /**
     * 16进制颜色字符串解析为颜色对象
     * @param color 颜色字符串
     * @returns IColorObj
     */
    const parseHexColor = (color) => {
        let hex = color.slice(1);
        let a = 1;
        if (hex.length === 3) {
            hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
        }
        if (hex.length === 8) {
            a = parseInt(hex.slice(6), 16) / 255;
            hex = hex.slice(0, 6);
        }
        const bigint = parseInt(hex, 16);
        return {
            r: (bigint >> 16) & 255,
            g: (bigint >> 8) & 255,
            b: bigint & 255,
            a,
        };
    };
    console.log('999', parseHexColor('#ffc2cc99'))


    /**
     * rgba颜色字符串解析为颜色对象
     * @param color 颜色字符串
     * @returns IColorObj
     */
    const parseRgbaColor = (color) => {
        const arr = color.match(/(\d(\.\d+)?)+/g) || [];
        const res = arr.map((s) => parseInt(s, 10));
        return {
            r: res[0],
            g: res[1],
            b: res[2],
            a: parseFloat(arr[3]),
        }
    };
    console.log('111', parseRgbaColor('rgba(255, 0, 0, .5)'))

    /**
     * 颜色字符串解析为颜色对象
     * @param color 颜色字符串
     * @returns IColorObj
     */
    const parseColorString = (color) => {
        if (color.startsWith('#')) {
            return parseHexColor(color);
        } else if (color.startsWith('rgb')) {
            return parseRgbaColor(color);
        } else if (color === 'transparent') {
            return parseHexColor('#00000000');
        }
        throw new Error(`color string error: ${color}`);
    };
    console.log('222', parseColorString('#ffc2cc99'))


    /**
     * 颜色字符串解析为各种颜色表达方式
     * @param color 颜色字符串
     * @returns IColorObj
     */
    const getColorInfo = (color) => {
        const colorObj = parseColorString(color);
        const hex = toHexString(colorObj);
        const rgba = toRgbaString(colorObj);
        const rgb = toRgbString(colorObj);
        return {
            hex,
            rgba,
            rgb,
            rgbaObj: colorObj,
        };
    };
    console.log('all', getColorInfo('#ffc2cc99'))

    /**
     * 16进制颜色字符串转化为rgba颜色字符串
     * @param hex 16进制颜色字符串
     * @returns rgba颜色字符串
     */
    const hexToRgba = (hex) => {
        const colorObj = parseColorString(hex);
        return toRgbaString(colorObj);
    };
    console.log('333 16进制--rgba', hexToRgba('#ffc2cc99'))

    /**
     * rgba颜色字符串转化为16进制颜色字符串
     * @param rgba rgba颜色字符串
     * @returns 16进制颜色字符串
     */
    const rgbaToHex = (rgba) => {
        const colorObj = parseColorString(rgba);
        console.log(colorObj)
        return toHexString(colorObj);
    };
    console.log('444', rgbaToHex('rgba(255, 194, 204,0.6)'))//0.6不能简写为.6



</script>

</html>